<!DOCTYPE html>
<html class="" lang="zh-cmn-Hans" style="position: static;">

<head>
  <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
  <meta content="有赞,移动电商服务平台" name="keywords">
  <meta content="" name="description">
  <meta content="True" name="HandheldFriendly">
  <meta content="320" name="MobileOptimized">
  <meta content="telephone=no" name="format-detection">
  <meta content="on" http-equiv="cleartype">
  <meta content="always" name="referrer">
  <link href="https://b.yzcdn.cn/v2/image/yz_fc.ico" rel="shortcut icon">
  <title>购物车</title>
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
  <style>
    [v-cloak] {
      display: block;
    }
  </style>
</head>

<body class=" body-fixed-bottom">
<div class="container " style="min-height: 581px;" v-cloak>
  <div class="content clearfix js-page-content">
    <div id="cart-container">
      <div>
        <div class="js-shop-list shop-list">
          <div class="block block-order block-cart" v-for="(shop,shopIndex) in lists">
            <div class="header">
              <div @click.stop="selectShop(shop,shopIndex)" class="select-group js-select-group">
                <span :class="{checked:shop.checked}" class="check" v-show="!editingShop"></span>
                <span :class="{checked:shop.removeChecked}" class="check" v-show="editingShop"></span>

              </div>
              <a class="shop-title">
                <i class="custom-store-img">店铺：</i>{{shop.shopTitle}}</a>
              <a @click="edit(shop,shopIndex)" class="j-edit-list pull-right c-blue font-size-12 edit-list"
                 data-type="cart"
                 href="javascript:"
              >
                {{shop.editingMsg}}
              </a>
            </div>
            <div>
              <ul class="js-list block block-list block-list-cart border-0">
                <li :class="{editing:shop.editing}" :key="good.id"
                    :ref="'goods-'+shopIndex+'-'+goodIndex"
                    @touchend="end($event,shopIndex,good,goodIndex)"
                    @touchmove="move($event,shopIndex,good,goodIndex)"
                    @touchstart="start($event,good)"
                    class="block-item block-item-cart"
                    v-for="(good,goodIndex) in shop.goodsList"
                >
                  <div>
                    <div @click.stop="selectGood(shop,good)" class="check-container">
                      <span :class="{checked:good.checked}" class="check" v-show="!editingShop"></span>
                      <span :class="{checked:good.removeChecked}" class="check" v-show="editingShop"></span>
                    </div>
                    <div class="name-card clearfix">
                      <a class="thumb js-goods-link">
                        <img :data-src="good.img" :src="good.img" class="js-lazy">
                      </a>
                      <div class="detail"><a class="js-goods-link">
                        <h3 class="title js-ellipsis"><i>{{good.title}}</i></h3>
                      </a>
                        <p class="sku ellipsis">
                          {{good.sku}}
                        </p>
                        <!-- 显示状态 -->
                        <div class="num" v-show="!shop.editing">
                          ×<span class="num-txt">{{good.number}}</span>
                          <!---->
                        </div>
                        <!-- 编辑状态 -->
                        <div class="num" v-show="shop.editing">
                          <!---->
                          <div class="quantity">
                            <button :class="{disabled:good.number ===1}" class="minus" type="button"></button>
                            <input class="txt" pattern="[0-9]*" type="text" v-model="good.number">
                            <button class="plus " type="button"></button>
                            <div @click.stop="reduce(good)"
                                 class="response-area response-area-minus"></div>
                            <div @click.stop="add(good)"
                                 class="response-area response-area-plus"></div>
                          </div>
                        </div>
                        <div class="price c-orange">
                          ¥<span>{{good.price | toFixed2}}</span></div>
                      </div>
                      <div class="error-box"></div>
                    </div>
                    <div @click="remove(shop,shopIndex,good,goodIndex)" class="delete-btn"><span>删除</span></div>
                  </div>
                </li>
              </ul>
            </div>
          </div>

        </div>
        <div class="js-invalid-goods shop-list">
          <p class="block invalid-list-title">
            以下商品无法一起购买
          </p>
          <div class="block block-list-cart block-order border-top-0">
            <ul class="block border-0 invalid-list js-invalid-list">
              <li class="block-item block-item-cart error">
                <div index="0">
                  <div class="check-container hide"><span class="check"></span></div>
                  <div class="name-card clearfix">
                    <a class="thumb js-goods-link"
                       href="https://h5.youzan.com/v2/showcase/goods?alias=36co1k2m80lmu"><img
                      class="js-lazy"
                      data-src="https://img.yzcdn.cn/upload_files/2017/06/29/FstNOp77JZHQjZIDFd5LlZYE3j_j.jpg!200x200.jpg"
                      src="https://img.yzcdn.cn/upload_files/2017/06/29/FstNOp77JZHQjZIDFd5LlZYE3j_j.jpg?imageView2/2/w/200/h/200/q/75/format/webp">
                      <!---->
                    </a>
                    <div class="detail"><a class="js-goods-link"
                                           href="https://h5.youzan.com/v2/showcase/goods?alias=36co1k2m80lmu">
                      <h3 class="title js-ellipsis"><i>国际安徒生奖大奖书系（文学作品系列第二辑 共8册） 国际安徒生奖获奖书系
                        是经过IBBY各国分会和丛书主编、著名儿童文学理论家方卫平教授层层筛选产生的经典佳作</i></h3>
                    </a>
                      <p class="sku ellipsis">
                        下周二发货
                      </p>
                      <div class="num">
                        ×<span class="num-txt">1</span>
                        <!---->
                      </div>
                      <!---->
                    </div>
                    <div class="error-box">商品已售罄</div>
                  </div>
                  <div class="delete-btn"><span>删除</span></div>
                </div>
              </li>
            </ul>
            <div class="center clear-block">
              <button class="btn clear-btn js-clear">清空失效商品</button>
            </div>
          </div>
        </div>
        <div class="js-bottom-opts bottom-fix" style="padding:0;">
          <div class="go-shop-tip js-go-shop-tip c-orange font-size-12">
            你需要分开结算每个店铺的商品哦~
          </div>
          <div class="bottom-cart clear-fix">
            <div @click="selectAll()" class="select-all">
              <span :class="{checked:allSelected}" class="check" v-show="!editingShop"></span>
              <span :class="{checked:allRemoveSelected}" class="check" v-show="editingShop"></span> 全选
            </div>
            <!-- 显示状态 -->
            <div class="total-price" v-show="!editingShop">
              合计：¥<span class="js-total-price" style="color: rgb(255, 102, 0);">{{total|toFixed2}}</span>
              <p class="c-gray-dark">不含运费</p>
            </div>
            <button :disabled="!selectLists.length" class="js-go-pay btn btn-orange-dark font-size-14"
                    href="javascript:;"
            >
              结算 (3)
            </button>
            <!-- 编辑状态 -->
            <button :disabled="!removeLists.length" @click="removeShops()"
                    class="j-delete-goods btn font-size-14 btn-red"
                    href="javascript:;"
                    v-show="editingShop"
            >删除
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="footer" style="min-height: 86px;">
  <div class="copyright">
    <div class="ft-copyright "
         style="background-image: url(https://img.yzcdn.cn/upload_files/2016/11/15/147918630760182374.png);">
      <a class="yz-logo" href="https://www.youzan.com/?from_source=support_logo">有赞提供技术支持</a></div>
  </div>
</div>
</body>

</html>
